<template>
    <div class="songsList">
        <div
                class="listItem"
                v-for="(item,index) of datailTracks"
                :key="index"
        >
            <div class="order">
                <p>{{index + 1}}</p>
            </div>
            <div class="songMsg">
                <div class="left">
                    <div class="songName">
                        <p>{{item.name}}</p>
                    </div>
                    <div class="singers">
                        <span v-for="(item1,index) of item.ar" :key="item1.id">{{item1.name}}{{index + 1 === item.ar.length? '':'、'}}</span>
                    </div>
                </div>
                <div class="right">
                    <img src="../assets/vedio.svg" alt="" v-show="item.mv !== 0 ">
                    <img src="../assets/pause.svg" alt=""
                         @click="handlePause()"
                         v-show="item.id === $store.state.currentId">
                    <img src="../assets/play.svg" alt=""
                         @click="handlePlay(item.id)"
                         v-show="item.id !== $store.state.currentId">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import "../assets/pause.svg"
    import "../assets/play.svg"
    import "../assets/vedio.svg"
    import { mapMutations } from "vuex"
  export default {
    name: "songs-list",
    props:{
      datailTracks:{
        type:Array,
        default:[]
      },
    },
    methods:{
      ...mapMutations(["setIsPlay","setCurrentId"]),
      handlePause(){
        this.setIsPlay(false)
      },
      handlePlay(id){
        this.setIsPlay(true)
        this.setCurrentId(id)

      }
    }
  };
</script>

<style scoped lang="scss">
    @import "../common/variable";
    .songsList{
        .listItem{
            width: 95%;
            margin: 10rem auto;
            border-bottom: 1rem seashell solid;
            box-sizing: border-box;
            text-align: start;
            display: flex;
            align-items: center;
            .order{
                width: 10%;
                p{
                    font-size: $header-fontsize-M;
                    color: dimgrey;
                }
            }
            .songMsg{
                display: flex;
                align-items: center;
                flex-grow: 1;
                justify-content: space-between;
                .songName{
                    width: 230rem;
                    p{
                        font-size: $header-fontsize-M;
                        color: dimgrey;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
                .singers{
                    width: 230rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    span{
                        font-size: $header-fontsize-S;
                    }
                }
            }
        }
    }


</style>